<template>
    <RsWrap class="sys-user" @resize="onResize">
        <div class="rs-toolbar">
            <el-button-group>
                <el-button type="primary" size="small" icon="rs-icon-add-circle-fill" @click="onAdd">新增</el-button>
                <el-dropdown size="small" @command="onRoleCommand">
                    <el-button type="primary" size="small">
                        角色配置<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :disabled="disabledRoleBtn" command="addRole" icon="rs-icon-role">添加角色</el-dropdown-item>
                        <el-dropdown-item :disabled="disabledRoleBtn" command="delRole" icon="el-icon-circle-close">删除角色</el-dropdown-item>
                        <el-dropdown-item :disabled="disabledRoleBtn" command="searchRole" icon="el-icon-search">查看角色</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!--  <el-button type="warning" size="small" icon="rs-icon-role" :disabled="disabledRoleBtn" @click="onAddRole">添加角色</el-button>
                <el-button type="danger" size="small" icon="el-icon-circle-close" :disabled="disabledRoleBtn" @click="onDelRole">删除角色</el-button>
                <el-button type="success" size="small" icon="el-icon-search" :disabled="disabledRoleBtn" @click="onShowRole">查看角色</el-button> -->
            </el-button-group>
            <RsTreeEdit v-model="query.bmbh" nodeKey="bmbh" :width="250" :height="250" size="small"
                :defaultProps="defaultProps" :expandKeys="expandKeys" clearable
                :items="depts" placeholder="请选择机构..." style="vertical-align: middle;" @change="onBmbhChange"></RsTreeEdit>
            <el-input v-model="query.yhmc" type="text" clearable placeholder="请输入用户名..." size="small" style="width:200px;vertical-align: middle;"></el-input>
            <el-button-group>
                <el-button type="success" size="small" icon="el-icon-search" @click="onQuery">查询</el-button>
                <el-button type="danger" size="small" icon="el-icon-circle-close" @click="onClearQuery">清空</el-button>
            </el-button-group>
        </div>
        <!-- <div class="rs-toolbar">
            <el-button-group>
                <el-button type="warning" size="small" icon="rs-icon-role" :disabled="disabledRoleBtn" @click="onAddRole">添加角色</el-button>
                <el-button type="danger" size="small" icon="el-icon-circle-close" :disabled="disabledRoleBtn" @click="onDelRole">删除角色</el-button>
                <el-button type="success" size="small" icon="el-icon-search" :disabled="disabledRoleBtn" @click="onShowRole">查看角色</el-button>
                <el-button type="warning" size="small" icon="rs-icon-role" :disabled="disabledRoleBtn" @click="onAddRole">添加部门</el-button>
                <el-button type="danger" size="small" icon="el-icon-circle-close" :disabled="disabledRoleBtn" @click="onDelRole">删除部门</el-button>
                <el-button type="success" size="small" icon="el-icon-search" :disabled="disabledRoleBtn" @click="onShowRole">查看部门</el-button>
            </el-button-group>
        </div> -->
        <el-table
            ref="table"
            :max-height="tableHeight"
            :height="tableHeight"
            :data="users"
            border
            size="small"
            highlight-current-row
            style="width: 100%"
            @row-click="onRowClick"
            >
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="bmmc" label="所属机构" width="250"></el-table-column>
                <el-table-column prop="yhmc" label="用户名称" width="180"></el-table-column>
                <el-table-column prop="dlmc" label="登录名称" width="120"></el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    minWidth="100">
                    <template slot-scope="scope" v-if="scope.row.dlmc!='sysadmin'">
                        <el-button class="rs-table-btn" @click="onEdit(scope.row)" type="text" size="mini">编辑</el-button>
                        <el-button class="rs-table-btn" @click="onDelete(scope.row)" type="text" size="mini">删除</el-button>
                        <!-- <el-button class="rs-table-btn" @click="onAddRole(scope.row)" type="text" size="mini">添加角色</el-button> -->
                        <el-button class="rs-table-btn" @click="onResetPassword(scope.row)" type="text" size="mini">重置密码</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <RsPagination :currentPage="currentPage" :pageSize="pageSize" :totalCount="totalCount" @change="onPageInfoChange"></RsPagination>
        <UserForm ref="form" :depts="depts"></UserForm>
        <UserRoleDlg ref="roleDlg"></UserRoleDlg>
    </RsWrap>
</template>
<script>
import tips from '../../mixin/tips';
import UserForm from './userForm';
import deepmerge from 'deepmerge';
import UserMethods from './UserMethod';
import UserRoleDlg from './userRoleDlg';
import user from '@/api/user'
export default {
    name:'UserPage',
    mixins:[tips,UserMethods],
    components:{UserForm,UserRoleDlg},
    provide() {
        return {
            user: this
        };
    },
    data(){
        return{
            query:{
                bmbh:'',
                yhmc:''
            },
            defaultProps: {
                children: 'depts',
                label: 'bmmc',
                isLeaf: 'leaf'
            },
            expandKeys:[],
            depts:[],
            tableHeight:0,
            totalCount:0,
            pageSize:20,
            currentPage:0,
            users:[],
            selectedRow:null
        }
    },
    computed:{
        queryData(){
            return deepmerge({
                page:this.currentPage,
                pageSize:this.pageSize
            },this.query)
        },
        disabledRoleBtn(){
            return this.selectedRow == null;
        }
    },
    created(){
        this.loadUsers();
        this.loadDeptTree();
    },
    methods:{
        onResize(obj){
            this.tableHeight = obj.height - 68;
        },
        onQuery(){
            this.loadUsers();
        },
        onClearQuery(){
            this.query.yhmc = '';
            this.query.bmbh = '';
        },
        onPageInfoChange(obj){
            this.pageSize = obj.pageSize;
            this.currentPage = obj.currentPage;
            this.loadUsers(this.query);
        },
        onBmbhChange(obj){
            //console.log(obj)
            //this.query.bmbh = obj.value;
            this.loadUsers();
        },
        onRoleCommand(cmd){
            console.log(cmd)
            console.log(this)
            if(cmd == 'addRole'){
                 this.onAddRole();
            }else if(cmd == 'delRole'){
                this.onDelRole();
            }else if(cmd == 'searchRole'){
                this.onShowRole();
            }
        },
        onAddRole(){
            this.$refs.roleDlg.show({
                type:0,
                yhbh:this.selectedRow.yhbh
            })
            .then((action)=>{
                if(action ==='ok'){

                }
            })
        },
        onDelRole(){
            this.$refs.roleDlg.show({
                type:1,
                yhbh:this.selectedRow.yhbh
            })
            .then((action)=>{
                if(action ==='ok'){

                }
            })
        },
        onShowRole(){
            this.$refs.roleDlg.show({
                type:2,
                yhbh:this.selectedRow.yhbh
            })
            .then((action)=>{
                if(action ==='ok'){

                }
            })
        },
        onRowClick(row,column,ev){
            this.selectedRow = row;
        },
        loadDeptTree(){
            user.queryDeptTree()
            .then(response => {
                const { data } = response;
                if( data.error_code == 0 ){
                    
                    this.depts = data.list;
                    if( this.depts.length > 0 ){
                        this.expandKeys.push(this.depts[0].bmbh)
                    }
                }else{
                }
            }).catch(error => {
            });
        }
    }
}
</script>